<template>
  <div class="outpatient-payment">
    <div class="page-header">
      <h2>门诊缴费</h2>
    </div>

    <div class="payment-container">
      <div class="scan-section">
        <div class="section-title">
          <el-icon><Camera /></el-icon>
          <span>扫码缴费</span>
        </div>

        <div class="scan-box" @click="handleScan">
          <div class="scan-line"></div>
          <el-icon class="scan-icon"><Camera /></el-icon>
          <div class="scan-text">将就诊号条形码放入框内，即可自动扫描</div>
          <div class="scan-hint">点击可手动触发扫码</div>
          <steambarcodereader
            v-show="false"
            ref="barcodeReaderRef"
            @decode="startCameraScan"
          />
        </div>

        <div class="manual-input">
          <div class="input-title">
            <el-icon><Document /></el-icon>
            <span>手动输入就诊号</span>
          </div>
          <div class="input-row">
            <el-input
              v-model="visitNumber"
              placeholder="请输入就诊号"
              clearable
            >
              <template #append>
                <el-button @click="handleManualInput" :icon="Search" />
              </template>
            </el-input>
          </div>
        </div>

        <!-- 模拟扫描成功按钮 -->
        <div class="demo-section">
          <div class="input-title">
            <el-icon><VideoPlay /></el-icon>
            <span>演示功能</span>
          </div>
          <div class="demo-buttons">
            <el-button
              type="primary"
              @click="handleDemoScan"
              class="demo-button"
            >
              模拟扫描成功
            </el-button>
          </div>
        </div>
      </div>

      <div class="instructions-section">
        <div class="section-title">
          <el-icon><InfoFilled /></el-icon>
          <span>操作指引</span>
        </div>

        <ul class="instructions-list">
          <li>
            <el-icon class="instruction-icon"><InfoFilled /></el-icon>
            <div class="instruction-text">
              请确保就诊号正确，系统将自动关联您的待缴费项目
            </div>
          </li>
          <li>
            <el-icon class="instruction-icon"><InfoFilled /></el-icon>
            <div class="instruction-text">
              扫码成功后，系统将显示您的待缴费清单，请核对信息后再支付
            </div>
          </li>
          <li>
            <el-icon class="instruction-icon"><InfoFilled /></el-icon>
            <div class="instruction-text">
              支付成功后，您可以在"我的缴费记录"中查看电子收据
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onUnmounted } from "vue";
import { useRouter } from "vue-router";
import { ElMessage, ElIcon, ElInput, ElButton } from "element-plus";
// 引入二维码扫码组件
import steambarcodereader from "@/components/qrcode/steambarcodereader.vue";
// 引入后端API接口
import { validateRegistrationCode } from "@/api/selfPaymentService";

const router = useRouter();
const visitNumber = ref("");
// 添加扫码组件的 ref
const barcodeReaderRef = ref(null);

const startCameraScan = (txt) => {
  // 调用摄像头扫描API验证挂号编号
  validateAppointmentNumber(txt);
  // 扫码成功后关闭摄像头
  if (barcodeReaderRef.value && barcodeReaderRef.value.stopCamera) {
    barcodeReaderRef.value.stopCamera();
  }
};

// 验证患者挂号编号是否有效
const validateAppointmentNumber = async (number) => {
  console.log("验证挂号编号:", number);
  try {
    const response = await validateRegistrationCode({ appointment_id: number });
    console.log("验证挂号编号响应:", response);
    if (response && response.code == 200) {
      const patientInfo = response.data || {};
      localStorage.setItem("currentPatientVisit", JSON.stringify(patientInfo));
      // ElMessage.success("挂号编号验证成功，正在跳转...");
      router.push("/self-service/payment-fee-details");
    }else {
      ElMessage.error(response.message || "无效的挂号编号，请重新扫码或输入");
      return false;
    }
  } catch (error) {
    console.error("验证挂号编号失败:", error);
    return false;
  }
};

const handleManualInput = () => {
  if (!visitNumber.value) {
    ElMessage.warning("请输入就诊号");
    return;
  }
  // 验证患者挂号编号
  validateAppointmentNumber(visitNumber.value);
};

// 模拟扫描成功
const handleDemoScan = async () => {
  //注意这里模拟的编号只能当天有效
  ElMessage.info("请自己手动修改代码并进行测试");
  // const number = 'TJ20251117748695';
  // try {
  //   const response = await validateRegistrationCode({ appointment_id: number });
  //   console.log("验证挂号编号响应:", response);
  //   if (response && response.code == 200) {
  //     const patientInfo = response.data || {};
  //     localStorage.setItem("currentPatientVisit", JSON.stringify(patientInfo));
  //     ElMessage.success("模拟扫码成功！正在跳转到缴费页面...");
  //     router.push("/self-service/payment-fee-details");
  //   }else {
  //     ElMessage.error(response.message || "无效的挂号编号，请重新扫码或输入");
  //     return false;
  //   }
  // } catch (error) {
  //   console.error("验证挂号编号失败:", error);
  //   return false;
  // }
};

// 组件卸载时关闭摄像头
onUnmounted(() => {
  if (barcodeReaderRef.value && barcodeReaderRef.value.stopCamera) {
    barcodeReaderRef.value.stopCamera();
  }
});
</script>

<style lang="scss" scoped>
.outpatient-payment {
  max-width: 1000px;
  margin: 0 auto;
  padding: 20px;
  box-sizing: border-box;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid #ebeef5;

  h2 {
    margin: 0;
    color: #1e40af;
    font-size: 28px;
    font-weight: 600;
  }
}

.step-indicator {
  color: #64748b;
  font-size: 16px;
  font-weight: 500;
  background: #f1f5f9;
  padding: 6px 12px;
  border-radius: 20px;
}

.payment-container {
  display: flex;
  gap: 30px;
  margin-bottom: 30px;
}

.scan-section,
.instructions-section {
  flex: 1;
  background: white;
  border-radius: 16px;
  padding: 30px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}

.section-title {
  font-size: 20px;
  font-weight: 600;
  color: #1e293b;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.scan-box {
  border: 2px dashed #3b82f6;
  border-radius: 12px;
  height: 300px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-bottom: 20px;
  background: #f8fafc;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.2s;

  &:hover {
    border-color: #2563eb;
    background: #f0f9ff;
  }
}

.scan-icon {
  font-size: 60px;
  color: #3b82f6;
  margin-bottom: 15px;
}

.scan-text {
  text-align: center;
  color: #64748b;
  margin-bottom: 20px;
  font-size: 16px;
}

.scan-hint {
  color: #94a3b8;
  font-size: 14px;
  text-align: center;
}

.scan-line {
  position: absolute;
  height: 4px;
  width: 80%;
  background: linear-gradient(90deg, transparent, #3b82f6, transparent);
  top: 50%;
  animation: scan 2s linear infinite;
}

@keyframes scan {
  0% {
    top: 20%;
  }
  50% {
    top: 80%;
  }
  100% {
    top: 20%;
  }
}

.manual-input {
  margin-top: 25px;
}

.input-title {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #64748b;
  font-size: 16px;
  margin-bottom: 12px;
}

.input-row {
  display: flex;
  gap: 12px;
}

.demo-section {
  margin-top: 25px;
  padding-top: 20px;
  border-top: 1px solid #e2e8f0;
}

.demo-buttons {
  display: flex;
  gap: 12px;
}

.demo-button {
  width: 100%;
  height: 40px;
}

.instructions-list {
  list-style: none;
  padding: 0;

  li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 20px;
    padding: 15px;
    background: #f8fafc;
    border-radius: 12px;
  }
}

.instruction-icon {
  color: #3b82f6;
  font-size: 20px;
  flex-shrink: 0;
  margin-top: 2px;
}

.instruction-text {
  color: #475569;
  line-height: 1.6;
}

.action-buttons {
  display: flex;
  justify-content: center;
  margin-top: 30px;
  padding-top: 30px;
  border-top: 1px solid #e2e8f0;
}

.back-button {
  min-width: 180px;
  height: 50px;
  font-size: 16px;
  border-radius: 12px;
  background: white;
  color: #64748b;
  border: 1px solid #cbd5e1;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  &:hover {
    background: #f8fafc;
    color: #475569;
    border-color: #94a3b8;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  }
}

@media (max-width: 768px) {
  .payment-container {
    flex-direction: column;
  }

  .page-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .page-header h2 {
    font-size: 24px;
  }
}
</style>